<template>
  <div>
    <div class="comment">
      <h2>评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <v-img
            :src="avator===''||avator===undefined?'http://ly-chen.oss-cn-beijing.aliyuncs.com/image/e2WBtnwRM2QtZy8wh7HW.jpg':avator"
            aspect-ratio="1"
            class="grey lighten-2"
          >
            <template v-slot:placeholder>
              <v-layout
                fill-height
                align-center
                justify-center
                ma-0
              >
                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
              </v-layout>
            </template>
          </v-img>
        </div>
        <el-input
          class="comment-input"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
      <el-button type="primary" class="sub-btn" @click="postComment()">评论</el-button>
    </div>
    <p>精彩评论: 共 {{commentList.length}} 条评论</p>
    <ul class="popular" v-for="(item, index) in commentList" :key="index">
      <li>
        <div class="popular-img">
          <v-img
            :src="item.user.avator"
            aspect-ratio="1"
            class="grey lighten-2"
          >
            <template v-slot:placeholder>
              <v-layout
                fill-height
                align-center
                justify-center
                ma-0
              >
                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
              </v-layout>
            </template>
          </v-img>
        </div>
        <div class="popular-msg">
          <ul>
            <li class="name">{{item.user.username}}</li>
            <li class="time">{{item.createTime}}</li>
            <li class="content">{{item.content}}</li>
          </ul>
        </div>
        <div class="up" ref="up" @click="postUp(item.id, item.up, index)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zan"></use>
          </svg>
          {{item.up}}
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
import {mixin} from '../mixins'
import { mapGetters } from 'vuex'

    /*
    * 加载所有评论的步骤:
    * =》首先判断"type"歌曲评论(0)还是歌单评论(1),然后根据url发送请求获得所有评论信息
    * =》把响应回来的数据放进commentList数组
    * =》遍历resp.data获得用户id
    * =》把用户头像和用户名放进数组
    *
    * 提交评论的步骤：
    * =》
    * */
export default {
  name: 'comment',
  data () {
    return {
      commentList: [], // 存放评论内容
      userPic: [], // 保存评论用户头像
      userName: [], // 保存评论用户名字
      textarea: '', // 存放输入内容
    }
  },
  props: [
    's_id', // 歌曲ID或歌单ID
    'type' // 歌单（1）/歌曲（0）
  ],
  computed: {
    ...mapGetters([
      'index', // 列表中的序号

      'userId',
      'activeName',
      'avator',
      'username',
      'loginIn',
      'location'
    ])
  },
  mounted () {
    this.getComment()
  },
  mixins: [mixin],
  methods: {
    // 获取所有评论
    getComment () {
      let url = ''
      //type 为1是歌单的评论， 0是歌曲的评论
      if (this.type === 1) {
        url = '/comment/songListComments?songlistId='
      } else if (this.type === 0) {
        url = '/comment/songComments?songId='
      }
      axios.get(this.$store.state.HOST + url + this.s_id)
        .then(resp =>{
          this.commentList = resp.data   //放进评论数组
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // // 获取评论用户的昵称和头像
    // getUsers (id) {
    //   axios.get(this.$store.state.HOST + '/commentOfConsumer?id=' + id)
    //     .then(function (response) {
    //       this.userPic.push(response.data[0].avator)
    //       this.userName.push(response.data[0].username)
    //     })
    //     .catch(function (error) {
    //       console.log(error)
    //     })
    // },
    // 提交评论
    postComment () {
      this.getComment()
      if (this.loginIn) {
        const params = this.$qs.stringify({
          songlistId: this.type === 1? this.s_id:null,
          songId: this.type === 0? this.s_id:null,
          userId : this.userId,
          type: this.type,
          content: this.textarea,
        })
        axios.post(this.$store.state.HOST + '/comment/save', params)
          .then(response => {
            if (response.data.code === 1) {
              this.textarea = ''
              this.getComment()
              this.$noti1fy({
                title: '评论成功',
                type: 'success'
              })
            } else {
              this.$notify({
                title: '评论失败',
                type: 'error'
              })
            }
          })
          .catch(failResponse => {})
      } else {
        this.$notify({
          title: '请先登录',
          type: 'warning'
        })
      }
    },
    // 点赞
    postUp (id, up, index) {
      if (this.loginIn) {
        var params = new URLSearchParams()
        params.append('id', id)
        params.append('up', up + 1)
        axios.post(this.$store.state.HOST + '/api/postUp', params)
          .then(response => {
            if (response.data.code === 1) {
              this.$refs.up[index].children[0].style.color = '#2796dd'
              this.getComment()
            }
          })
          .catch(failResponse => {})
      } else {
        this.$notify({
          title: '请先登录',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
  /*评论*/
  .comment h2 {
    margin-bottom: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid black;
  }
  .comment-msg {
    display: flex;
    flex-direction: row;
  }
  .comment-img {
    width: 50px;
  }
  .comment-img img {
    width: 100%;
  }
  .comment-input {
    margin-left: 10px;
    flex: 1;
  }
  .sub-btn{
    margin-top: 10px;
    margin-left: 90%;
  }
  /*热门评论*/
  .popular {
    width: 100%;
  }
  .popular > li{
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    display: flex;
    flex-direction: row;
  }
  .popular-img {
    width: 47px;
  }
  .popular-img img {
    width: 100%;
  }
  .popular-msg {
    padding: 0 20px;
    flex: 1;
  }
  .popular-msg li {
    width: 100%;
  }
  .popular-msg .time {
    font-size: .6rem;
    color: rgba(0, 0, 0, 0.5);
  }
  .popular-msg .content {
    font-size: 1rem;
  }
  .up {
    width: 50px;
    line-height: 60px;
  }
  .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    color: black;
    font-size: 1.5em;
  }
</style>
